<!-- 用户管理 -->
<script lang="ts" setup>
import type { IMySearch, IMySearchConfig } from '@/types/global'
import { nextTick } from 'vue'
import { ref, type PropType } from 'vue'

const emits = defineEmits(['search'])

defineProps({
  // 搜索栏配置
  searchConfig: {
    type: Array as PropType<IMySearchConfig[]>,
    default() {
      return []
    }
  },
  // 搜索栏数据
  searchData: {
    type: Object as PropType<IMySearch>,
    default() {
      return {} as IMySearch
    }
  },
  // 搜索树宽度
  treeWidth: {
    type: String,
    default: '350px'
  }
})
// 搜索栏ref
const searchRef = ref<HTMLDivElement>()
// 按钮栏ref
const btnRef = ref<HTMLDivElement>()
// 标签栏ref
const tabRef = ref<HTMLDivElement>()
// 表格高度样式
const tableHeight = ref('')

setTableHeight()

/**
 * 计算表格高度样式
 */
function setTableHeight() {
  nextTick(() => {
    let searchHeight = 0
    let btnHeight = 0
    let tabHeight = 0
    if (searchRef.value) {
      searchHeight = searchRef.value.getBoundingClientRect().height
    }
    if (btnRef.value) {
      btnHeight = btnRef.value.getBoundingClientRect().height
    }
    if (tabRef.value) {
      tabHeight = tabRef.value.getBoundingClientRect().height
    }
    tableHeight.value = `height: calc(100% - ${searchHeight + btnHeight + tabHeight}px)`
  })
}
/**
 * 点击搜索
 */
function searchClick() {
  emits('search')
}
</script>

<template>
  <div class="dui-page-bg">
    <!-- 左侧树 -->
    <div class="dui-page-tree" :style="`width: ${treeWidth}`" v-if="$slots.tree">
      <slot name="tree"></slot>
    </div>
    <div class="dui-page-body">
      <!-- 搜索栏 -->
      <div class="dui-page-search" ref="searchRef" v-if="searchConfig.length > 0">
        <dui-search :config="searchConfig" :search="searchData" @more="setTableHeight" @search="searchClick" />
      </div>
      <!-- 按钮栏 -->
      <div class="dui-page-btn" v-if="$slots.btn" ref="btnRef">
        <slot name="btn"></slot>
      </div>
      <!-- 标签栏 -->
      <div class="dui-page-tabs" v-if="$slots.tab" ref="tabRef">
        <slot name="tab"></slot>
      </div>
      <!-- 表格 -->
      <div class="dui-page-table" :style="tableHeight">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.dui-page-bg {
  height: 100%;
  display: flex;
  align-items: center;
  background-color: white;
  .dui-page-tree {
    flex-direction: 0;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
  .dui-page-body {
    flex: 1;
    height: 100%;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
    .dui-page-search {
    }
    .dui-page-btn {
      padding-bottom: 10px;
      box-sizing: border-box;
    }
    .dui-page-table {
    }
  }
}
</style>
